<template>
  <!-- 弹窗 -->
  <el-dialog
    :model-value="dialogDetails"
    title="订单详情"
    width="400"
    :before-close="handleClose"
  >
    <el-divider class="custom-divider" />
    <div v-loading="loading" element-loading-text="Loading...">
      <el-descriptions :column="1">
        <el-descriptions-item label="订单ID：">
          <span style="margin-left: 13px">
            {{ DetailsData.orderId }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="活动名称：">
          {{ DetailsData.activityName }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间：">
          {{ DetailsData.placeTime }}
        </el-descriptions-item>
        <el-descriptions-item label="付款时间：">
          {{ DetailsData.payTime }}
        </el-descriptions-item>
        <el-descriptions-item label="门票类型：">
          {{ DetailsData.ticketName }}
        </el-descriptions-item>
        <el-descriptions-item label="金额：">
          <span style="margin-left: 28px">
            {{ DetailsData.originalPrice }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="实付金额：">
          {{ DetailsData.amount }}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式：">
          {{ DetailsData.paymentMethod }}
        </el-descriptions-item>
        <el-descriptions-item label="订单状态：">
          {{ DetailsData.payStatusStr }}
        </el-descriptions-item>
        <el-descriptions-item label="分销商："></el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onUpdated } from 'vue';
import { getActivityDataOrder } from '@/api/Activity/ActivityMent';
const props = defineProps({
  dialogDetails: {
    type: Boolean,
  },
  orderNum: {
    type: String,
  },
});

const emit = defineEmits(['cancel']);
// 详情
const DetailsData = ref({});
const loading = ref(true);
const ActivityDataOrder = async () => {
  loading.value = true;
  const res = await getActivityDataOrder(props.orderNum);
  if (res.data.code === 200) {
    DetailsData.value = res.data.data;
    loading.value = false;
  }
};
// 关闭对话框
const handleClose = () => {
  emit('cancel');
};
onUpdated(() => {
  ActivityDataOrder();
});
</script>
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;

  > span {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #606266;
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s;

    &:hover {
      color: #409eff;
      background-color: #ecf5ff;
    }

    .el-icon {
      margin: 0;
    }
  }
}

:deep(.el-descriptions__label) {
  color: #9f9fa1;
}

:deep(.el-dialog__body) {
  padding-top: 10px;
  padding-bottom: 10px;
}

.el-divider--horizontal {
  margin-bottom: 20px;
  margin-top: 5px;
}

:deep(.el-dialog__header) {
  padding-bottom: 10px;
  margin-right: 0;
}
</style>
